<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>ng-repeat 指令</title>
  <style>
    .red {
      color: red;
    }

    .green {
      color: green;
    }
  </style>
</head>

<body ng-app="myApp">
  <ul ng-controller="ListController">
    <!-- class="{{$even?'red':'green'}}" -->
    <!-- ng-class会根据当前设置对象的属性和属性值决定是否添加特定类名 -->
    <li ng-repeat="item in xiaoheishenghuo" ng-class="{red:$even,green:$odd}" data-id="{{item.id}}">
      <strong>{{item.name}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;
      <span>{{item.age}}</span>
    </li>
  </ul>
  <script type="text/javascript" src="js/angular.js" ></script>
  <script>
    angular.module('myApp', [])
      .controller('ListController', ['$scope', function($scope) {


        $scope.xiaoheishenghuo = [];

        for (var i = 1; i < 10; i++) {
          $scope.xiaoheishenghuo[$scope.xiaoheishenghuo.length] = {
            id: i,
            name: '赵小黑的小' + i,
            age: 20 + i
          };
        }


      }]);
  </script>
</body>

</html>
